import { Col, Row,Form,Input,Radio,Modal } from 'antd';
import React, { useState } from 'react';

export const Channel = (props) => {

   // 设置佣金弹框状态  默认隐藏
  const [moneybox, setmoney] = useState(false);

   // 点击 “设置佣金时” 显示弹出框
  const showModal = () => {
    setmoney(true);
  };
  
   // 点击 确认 隐藏弹框
  const handleOk = () => {
    setmoney(false);
  };
   // 点击 取消 隐藏弹框  
  const handleCancel = () => {
    setmoney(false);
  };

   // 输入佣金
   const [moneymix, setmoneymix] = useState('') 

return (
  <>
    <h1 id='channel'>默认渠道</h1>
    <Form layout="horizontal">
     <Row gutter={[16, 16]}>
        <Col span={6}>
         <Form.Item label="携程">
            <Radio.Button  style={{ fontSize:"20px" }} onClick={showModal}>设置佣金</Radio.Button>
         </Form.Item>
        </Col>

        <Col span={6}>
         <Form.Item label="去哪儿">
            <Radio.Button  style={{ fontSize:"20px" }} onClick={showModal}>设置佣金</Radio.Button>
         </Form.Item>
        </Col>

        <Col span={6}>
         <Form.Item label="飞猪">
            <Radio.Button  style={{ fontSize:"20px" }} onClick={showModal}>设置佣金</Radio.Button>
         </Form.Item>
        </Col>

         <Col span={6}>
         <Form.Item label="美团">
            <Radio.Button  style={{ fontSize:"20px" }} onClick={showModal}>设置佣金</Radio.Button>
         </Form.Item>
        </Col>

        <Col span={6}>
         <Form.Item label="米途">
            <Radio.Button  style={{ fontSize:"20px" }} onClick={showModal}>设置佣金</Radio.Button>
         </Form.Item>
        </Col>

        <Col span={6}>
         <Form.Item label="途游">
            <Radio.Button  style={{ fontSize:"20px" }} onClick={showModal}>设置佣金</Radio.Button>
         </Form.Item>
        </Col>

        <Col span={6}>
         <Form.Item label="蚂蚁短租">
            <Radio.Button  style={{ fontSize:"20px" }} onClick={showModal}>设置佣金</Radio.Button>
         </Form.Item>
        </Col>

        <Col span={6}>
         <Form.Item label="艺龙旅行网">
            <Radio.Button  style={{ fontSize:"20px" }} onClick={showModal}>设置佣金</Radio.Button>
         </Form.Item>
        </Col>

        
      </Row>
    </Form>

    <Modal title="按固定比例结算佣金" open={moneybox} onOk={handleOk} onCancel={handleCancel} okText="确定" cancelText="取消" >
        <Input addonBefore="佣金比例：" placeholder="输入佣金比例" size="large" value={moneymix} onChange={e => setmoneymix(e.target.value)}/>
      </Modal>
  </>
);
}

